<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 面向过程  用机器的思维写代码 
        // 注重的是过程  
        // 优点 : 
        //  1. 速度快  
        // 缺点:
        //  2. 不容易扩展  不容易维护  


        //面相对象  用人的思维写代码 
        // 注重的是结果 
        // 优点:
        //  1. 容易扩展  2.代码复用性强   3. 适合 人 
        
        //  缺点:
        //  执行过程 会转成面向过程  相对于面向过程 可能会很慢 (现在技术发展 忽略不计)

        // 吃面条 
        
        // 面向过程  
/* 
        ■用多少面粉
        ■用多少水
        ■怎么和面
        ■怎么切面条
        ■做开水
        ■煮面
        ■吃面

        上面每一步都得写个函数  挺麻烦 
        
        
        */

        // 面相对象
        // 找到一个面馆  
        // 这个面馆会上面所有的流程 
        // 我们只需要等着吃面  
        



        // 面相对象  
        // 类  对象 
        // 万物皆对象  

        var obj = {
            name:'zhangsan',
            sing(){
                alert(this.name)
            }
        }
        // 面馆是一个类 
        // 王玉杰兰州拉面   张鹏安徽板面  刘梦山西刀削面  王珂西安biangbiang面

        // 王玉杰拉面馆 具备做面的所有属性和方法  
        // 田安星 只需要点面 等着吃就可以了 


        // 轿车是一个类  
        // 楼下停车场 都是轿车   他们一个个是具体的轿车  


        // 人是一个类  

        // 王玉杰  张鹏  王珂  是具体的某一个 


        // 包工头  

        // 王晨盖房子 找到一个具体的包工头  
        // 这个包工头 身上具备 一切盖房子的属性方法 
        // 只需要找到这个人  只等结果就好  



        // 想写一个选项卡  

        // 面向过程  
        // 获取元素
        // 绑定事件 
        // 写事件处理函数  



        // 用面向对象  
        // 需要找到一个会写选项卡的对象  


        // 问题如何拿到这个对象 ? 


        // 对象从类中 实例化出来  

        // 对象一定属于某个类  

        // 对象相互独立  不依赖 

        // 类有的东西   对象一定有  
        // 类没有的 对象也可以有 


    </script>
</body>
</html>